import React, { useState, useEffect } from "react";
import { Select } from "antd";

import "./Slect.css";

const options1 = [
  {
    value: "筹建",
    color: "red",
    bg: "rgba(235, 145, 145, 0.454)",
  },
  {
    value: "营业中",
    color: "green",
    bg: "rgba(104, 238, 151, 0.454)",
  },
  {
    value: "失败",
    color: "blue",
    bg: "rgba(113, 143, 239, 0.454)",
  },
];

const SelectDemo = () => {
  const [selectedOption, setSelectedOption] = useState(options1[0].value);
  const [color1, setColor1] = useState(options1[0].color);

  useEffect(() => {
    const select = document.querySelector(".ant-select-selection-item");
    if (select) {
      requestAnimationFrame(() => {
        select.style.color = `${color1}`;
      });
    }
  }, [color1]);

  useEffect(() => {
    //搜集数据发生请求
    console.log(selectedOption);
  }, [selectedOption]);

  const handleChange = (value, color) => {
    setSelectedOption(value);
    setColor1(color);
  };

  const DropdownRender1 = () => {
    return options1.map((item) => {
      return (
        <div
          key={item.value}
          style={{
            color: `${item.color}`,
            textAlign: "center",
            background: selectedOption === item.value ? `${item.bg}` : "#fff",
            paddingTop: "5px",
          }}
          onClick={() => handleChange(item.value, item.color)}
        >
          {item.value}
        </div>
      );
    });
  };

  return (
    <>
      <Select
        showArrow
        dropdownRender={DropdownRender1}
        style={{
          width: "20%",
        }}
        value={selectedOption}
        onChange={handleChange}
      ></Select>
    </>
  );
};
export default SelectDemo;
